<template>
<div id="jeidian">
    <div class="content-w">
        <div id="title-content" class="clearfix w1230">
				<div id="content-info">
					<!-- <form> -->
					<input type="text" id="shousuo" name="uname"  placeholder="搜索 天猫 商品/品牌/商铺" autocomplete="off" v-model="shousou" @keyup.enter="dasou"/>
					<input value="搜索" id="bnt-shousuo" type="button" @click="dasou"/>
					<!-- </form> -->
					<ul id="ssli" class="clearfix">
							<li class="ss-nav"><a href="javascript">针织裙</a></li>
							<li class="ss-nav hs"><a href="javascript">连衣裙</a></li>
							<li class="ss-nav"><a href="javascript">四件套</a></li>
							<li class="ss-nav hs"><a href="javascript">摄像头</a></li>
							<li class="ss-nav"><a href="javascript">客厅灯</a></li>
							<li class="ss-nav"><a href="javascript">口红</a></li>
							<li class="ss-nav hs"><a href="javascript">手机</a></li>
							<li class="ss-nav"><a href="javascript">运动鞋</a></li>
							<li class="ss-nav hs"><a href="javascript">牛奶</a></li>
						</ul>
				<div id="title-tp">
					<img src="../assets/img/ys/tianmao.gif">
				</div>
				</div>
				<div class="tmcs clearfix">
					<a class="tmcs-nav" href="#"><img src="../assets/img/ys/tianmaocs.png"></a>
					<a class="tmcs-nav" href="#"><img src="../assets/img/ys/tianmaogj.png"></a>
					<a class="tmcs-nav" href="#">天猫会员</a>
					<a class="tmcs-nav" href="#">电器城</a>
					<a class="tmcs-nav" href="#">喵鲜生</a>
					<a class="tmcs-nav" href="#">医药馆</a>
					<a class="tmcs-nav" href="#">营业厅</a>
					<a class="tmcs-nav" href="#">魅力惠</a>
					<a class="tmcs-nav" href="#">飞猪旅行</a>
					<a class="tmcs-nav" href="#">苏宁易购</a>
				</div>
			</div>
            <div id="title-wrap" :style="bcg">
				<div id="title-bottom" class="w1230">
					<ul id="banner">
						<li class="banner-l" v-for="(item,key) in bannertp " :key="key"><img :src="item" :alt="key"></li>
					</ul>
					<ul id="hd" class="clearfix">
						<li class="hd-l active"></li>
						<li class="hd-l" v-for="(item,key) in 5 " :key="key"></li>
					</ul>
					<div id="title-sp"><i class="iconfont icon-fenlei2"></i><span id="sp-info">商品分类</span></div>
						<ul id="fenleidaohang" class="clearfix">
							<li class="tl nzny"><i class="iconfont icon-qunzi icn"></i><a href="#"><span id="sp-info">女装/内衣</span></a>
								<div class='tl-n clearfix nvzhuang'>
									<div class="n-l">
										<div class='ny clearfix'>
											<div class='ny-l'>当季流行></div>
											<div class='ny-r'>
												<a class='ny-gy bt'>女装新品</a>
												<a class='ny-gy'>商场同款</a>
												<a class='ny-gy'>T恤</a>
												<a class='ny-gy'>衬衫</a>
												<a class='ny-gy'>时髦外套</a>
												<a class='ny-gy'>休闲裤</a>
												<a class='ny-gy'>牛仔裤</a>
												<a class='ny-gy'>运动内衣</a>
												<a class='ny-gy bt'>潮流家居服</a>
												<a class='ny-gy'>百搭船袜</a>
												<a class='ny-gy bt'>无痕文胸</a>
												<a class='ny-gy bt'>仙女连衣裙</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>精选上装></div>
											<div class='ny-r'>
												<a class='ny-gy'>小西装</a>
												<a class='ny-gy bt'>衬衫</a>
												<a class='ny-gy'>雪纺衫</a>
												<a class='ny-gy'>卫衣</a>
												<a class='ny-gy'>短外套</a>
												<a class='ny-gy'>丝绒卫衣</a>
												<a class='ny-gy'>风衣</a>
												<a class='ny-gy'>毛针织衫</a>
												<a class='ny-gy'>T恤</a>
												<a class='ny-gy bt'>仙女连衣裙</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>浪漫裙装></div>
											<div class='ny-r'>
												<a class='ny-gy bt'>连衣裙</a>
												<a class='ny-gy bt'>蕾丝连衣裙</a>
												<a class='ny-gy bt'>A字裙</a>
												<a class='ny-gy'>荷叶边裙大摆裙</a>
												<a class='ny-gy'>包臀裙</a>
												<a class='ny-gy'>袖连衣裙</a>
												<a class='ny-gy'>百褶裙</a>
												<a class='ny-gy'>棉麻连衣裙</a>
												<a class='ny-gy'>长牛仔裙</a>
												<a class='ny-gy'>真丝连衣裙</a>
												<a class='ny-gy'>半身裙</a>
												<a class='ny-gy bt'>印花连衣裙</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>女士下装></div>
											<div class='ny-r'>
												<a class='ny-gy bt'>休闲裤</a>
												<a class='ny-gy'>阔腿裤</a>
												<a class='ny-gy bt'>牛仔裤</a>
												<a class='ny-gy'>打底裤</a>
												<a class='ny-gy'>开叉运动裤</a>
												<a class='ny-gy'>哈伦裤</a>
												<a class='ny-gy'>休闲裤</a>
												<a class='ny-gy'>背带裤</a>
												<a class='ny-gy'>小脚裤</a>
												<a class='ny-gy bt'>西装裤</a>
												<a class='ny-gy'>短裤</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>特色女装></div>
											<div class='ny-r'>
												<a class='ny-gy bt'>时尚套装</a>
												<a class='ny-gy'>休闲套装</a>
												<a class='ny-gy bt'>日系女装</a>
												<a class='ny-gy'>婚纱</a>
												<a class='ny-gy'>唐装</a>
												<a class='ny-gy'>优雅旗袍</a>
												<a class='ny-gy'>精致礼服</a>
												<a class='ny-gy'>精选妈妈装</a>
												<a class='ny-gy'>大码女装职业套装</a>
												<a class='ny-gy bt'>小码女装</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>文胸塑身></div>
											<div class='ny-r'>
												<a class='ny-gy bt'>光面文胸</a>
												<a class='ny-gy'>运动文胸</a>
												<a class='ny-gy bt'>美背文胸</a>
												<a class='ny-gy'>聚拢文胸</a>
												<a class='ny-gy'>大杯文胸</a>
												<a class='ny-gy'>轻薄塑身</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>当季流行></div>
											<div class='ny-r'>
												<a class='ny-gy bt'>女装新品</a>
												<a class='ny-gy'>商场同款</a>
												<a class='ny-gy bt'>仙女连衣裙</a>
												<a class='ny-gy'>T恤</a>
												<a class='ny-gy'>衬衫</a>
												<a class='ny-gy'>时髦外套</a>
												<a class='ny-gy'>休闲裤</a>
												<a class='ny-gy'>牛仔裤</a>
												<a class='ny-gy'>运动内衣</a>
												<a class='ny-gy bt'>潮流家居服</a>
												<a class='ny-gy'>百搭船袜</a>
												<a class='ny-gy bt'>无痕文胸</a>
											</div>
										</div>
									</div>
									<div class='n-r'>
										<div class="nr-top">
											<a class="r-a"><img src="../assets/img/ys/r1.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r2.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r3.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r4.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r5.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r6.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r7.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r8.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r9.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r10.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r11.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r12.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r13.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r14.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r15.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r16.jpg"></a>
										</div>
										<div class="nr-bottom">
											<a class="nr-a"><img src="../assets/img/ys/r17.jpg"></a>
										</div>
									</div>
								</div>
							</li>
							<li class="tl nzhw"><i class="iconfont icon-nanzhuangleimu  icn"></i><a href="#"><span id="sp-info">男装/户外运动</span></a>
								<div class='tl-n clearfix nanzhuang'>
									<div class="n-l">
										<div class='ny clearfix'>
											<div class='ny-l'>当季流行></div>
											<div class='ny-r'>
												<a class='ny-gy bt2'>双11男装会场</a>
												<a class='ny-gy'>当季新品</a>
												<a class='ny-gy bt2'>商场同款</a>
												<a class='ny-gy'>保暖棉服</a>
												<a class='ny-gy'>潮流卫衣</a>
												<a class='ny-gy'>修身夹克</a>
												<a class='ny-gy'>电动车</a>
												<a class='ny-gy'>衬衫</a>
												<a class='ny-gy'>冲锋衣</a>
												<a class='ny-gy bt2'>修身西服</a>
												<a class='ny-gy'>秋冬风衣</a>
												<a class='ny-gy bt2'>印花T恤</a>
												<a class='ny-gy'>鱼竿</a>
												<a class='ny-gy'>破洞牛仔裤</a>
												<a class='ny-gy'>休闲鞋</a>
												<a class='ny-gy'>篮球鞋</a>
												<a class='ny-gy'>自行车</a>
												<a class='ny-gy bt2'>平衡车</a>
												<a class='ny-gy'>帆布鞋</a>
												<a class='ny-gy bt2'>运动套装</a>
												<a class='ny-gy'>运动卫衣</a>
												<a class='ny-gy'>束脚裤九分裤</a>
												<a class='ny-gy'>温暖的针织衫</a>
												<a class='ny-gy bt2'>跑步机</a>
												<a class='ny-gy'>棉麻面料牛仔</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>男士外套></div>
											<div class='ny-r'>
												<a class='ny-gy bt2'>夹克马甲</a>
												<a class='ny-gy'>单西棒球服</a>
												<a class='ny-gy bt2'>棉衣</a>
												<a class='ny-gy'>毛呢大衣</a>
												<a class='ny-gy'>风衣</a>
												<a class='ny-gy'>西服套装</a>
												<a class='ny-gy'>羽绒服</a>
												<a class='ny-gy'>皮衣</a>
												<a class='ny-gy'>针织开衫</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>男士内搭></div>
											<div class='ny-r'>
												<a class='ny-gy bt2'>短袖</a>
												<a class='ny-gy bt2'>T恤</a>
												<a class='ny-gy bt2'>POLO衫</a>
												<a class='ny-gy'>短袖衬衫</a>
												<a class='ny-gy'>背心</a>
												<a class='ny-gy'>卫衣</a>
												<a class='ny-gy'>针织衫</a>
												<a class='ny-gy'>毛衣</a>
												<a class='ny-gy'>长袖衬衫</a>
												<a class='ny-gy'>长袖T恤</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>男士裤装></div>
											<div class='ny-r'>
												<a class='ny-gy bt2'>小脚裤</a>
												<a class='ny-gy'>9分裤</a>
												<a class='ny-gy bt2'>短裤</a>
												<a class='ny-gy'>休闲裤</a>
												<a class='ny-gy'>牛仔裤</a>
												<a class='ny-gy'>针织裤</a>
												<a class='ny-gy'>西裤</a>
												<a class='ny-gy'>运动裤</a>
												<a class='ny-gy'>工装裤</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>特色男装></div>
											<div class='ny-r'>
												<a class='ny-gy bt2'>潮牌</a>
												<a class='ny-gy'>中老年加大码</a>
												<a class='ny-gy bt2'>职场精英</a>
												<a class='ny-gy'>中国风</a>
												<a class='ny-gy'>情侣装</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>运动服></div>
											<div class='ny-r'>
												<a class='ny-gy bt2'>短袖t恤运动夹克</a>
												<a class='ny-gy'>运动裤</a>
												<a class='ny-gy bt2'>运动内衣</a>
												<a class='ny-gy'>速干t恤</a>
												<a class='ny-gy'>运动Polo</a>
												<a class='ny-gy'>运动卫衣</a>
												<a class='ny-gy bt2'>运动套装</a>
												<a class='ny-gy'>健身服</a>
												<a class='ny-gy'>运动夹克</a>
											</div>
										</div>
										<div class='ny clearfix'>
											<div class='ny-l'>户外运动></div>
											<div class='ny-r'>
												<a class='ny-gy bt2'>钓竿</a>
												<a class='ny-gy'>双肩背包</a>
												<a class='ny-gy bt2'>防晒衣</a>
												<a class='ny-gy'>户外包</a>
												<a class='ny-gy'>帐篷</a>
												<a class='ny-gy'>手电</a>
												<a class='ny-gy'>筒刀具</a>
											</div>
										</div>
									</div>
									<div class='n-r'>
										<div class='n-r'>
										<div class="nr-top">
											<a class="r-a"><img src="../assets/img/ys/r1.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r2.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r3.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r4.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r5.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r6.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r7.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r8.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r9.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r10.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r11.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r12.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r13.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r14.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r15.jpg"></a>
											<a class="r-a"><img src="../assets/img/ys/r16.jpg"></a>
										</div>
										<div class="nr-bottom">
											<a class="nr-a"><img src="../assets/img/ys/r17.jpg"></a>
										</div>
									</div>
									</div>
								</div>
							</li>
							<li class="tl"><i class="iconfont icon-xiezi01 icn"></i><a href="#"><span id="sp-info">女鞋/男鞋/箱包</span></a></li>
							<li class="tl"><i class="iconfont icon-kouhong1 icn"></i><a href="#"><span id="sp-info">美妆/个人护理</span></a></li>
							<li class="tl"><i class="iconfont icon-zuanshi icn"></i><a href="#"><span id="sp-info">腕表/眼镜/珠宝饰品</span></a></li>
							<li class="tl"><i class="iconfont icon-shouji2 icn"></i><a href="#"><span id="sp-info">手机/数码/电脑办公</span></a></li>
							<li class="tl"><i class="iconfont icon-weibiaoti2fuzhi05 icn"></i><a href="#"><span id="sp-info">母婴玩具</span></a></li>
							<li class="tl"><i class="iconfont icon-miantiao icn"></i><a href="#"><span id="sp-info">零食/茶酒/进口食品</span></a></li>
							<li class="tl"><i class="iconfont icon-yingtao1 icn"></i><a href="#"><span id="sp-info">生鲜水果</span></a></li>
							<li class="tl"><i class="iconfont icon-richangjiadianxiyiji icn"></i><a href="#"><span id="sp-info">大家电/生活电器</span></a></li>
							<li class="tl"><i class="iconfont icon-jianzhugongren icn"></i><a href="#"><span id="sp-info">家具建材</span></a></li>
							<li class="tl"><i class="iconfont icon-icon- icn"></i><a href="#"><span id="sp-info">汽车/配件/用品</span></a></li>
							<li class="tl"><i class="iconfont icon-jiaju-hui icn"></i><a href="#"><span id="sp-info">家纺/家饰/鲜花</span></a></li>
							<li class="tl"><i class="iconfont icon-yiliao icn"></i><a href="#"><span id="sp-info">医疗保健</span></a></li>
							<li class="tl"><i class="iconfont icon-kafeibeichabei icn"></i><a href="#"><span id="sp-info">厨具/收纳/宠物</span></a></li>
							<li class="tl"><i class="iconfont icon-tushu2 icn"></i><a href="#"><span id="sp-info">图书音像</span></a></li>
						</ul>
				</div>
			</div>	
    </div>
	<div class="content-p">
		<div class="sp-w clearfix">
			<div class="shangou">
				<div class="shangou-top clearfix">
					<span class="stp">品牌闪购</span>
					<span class="stp">BRAND SALE</span>
					<a class="gengduo">></a>
				</div>
				<a id="stp-img"><img src="../assets/img/ys/p1.png"></a>
			</div>
			<div class="pingtai">
				<div class="pingtai-top clearfix">
					<span class="stp2">聚名品</span>
					<span class="stp2">LUXURY CHANNEL</span>
					<a class="gengduo2">更多</a>
				</div>
				<a href="#" class="pt-img"><img src="../assets/img/ys/p2.png"></a>
			</div>
			<div class="pingtai">
				<div class="pingtai-top clearfix">
					<span class="stp2">品牌活动</span>
					<span class="stp2">BRAND ACTIVITY</span>
					<a class="gengduo2">更多</a>
				</div>
				<a href="#" class="pt-img"><img src="../assets/img/ys/p3.png"></a>
			</div>
		</div>
	</div>
	<router-view></router-view>
</div>
</template>
<script>
export default {
	data(){
		return{
			bannertp:['/static/img/b1.jpg','/static/img/b2.jpg','/static/img/b3.jpg','/static/img/b4.jpg','/static/img/b5.jpg','/static/img/b6.jpg'],
			bannerbj:['#E8E8E8','#E8E8E8','#FD9DB9','#E8E8E8','#1E65C6','#DC2A56'],
			n:0,
			oldn:0,
			bcg:{
				background:""
			},
			time:null,
			shousou:"",
			uname:""
		}
	},
	methods:{
		dasou(){
			if(this.uname){
				if(this.shousou){
					var _this=this
					this.$router.push({name:"sousuo",params:{cha:_this.shousou}})
				}else{
					console.log(1)
					return false
				}
			}else{
				this.$router.push("/login")
			}
			
		}
	},
	created(){
		axios.get("/api/").then((data)=>{
			this.uname=data.data
		})
		var _this=this
		var c=document.getElementsByClassName('hd-l')
			c.className="hd-l active"
		this.time=setInterval(function(){
			_this.n=Number(_this.n)+1
			var ban=document.getElementsByClassName("banner-l")
			var bl=document.getElementsByClassName('hd-l')
			var bannerbjs=document.getElementById('#title-wrap')
			if(_this.n==6){
				_this.n=0
			}
			for(var i=0;i<6;i++){
				
				bl[i].className = "hd-l"
			}
			_this.bcg.background=_this.bannerbj[_this.n]
			bl[_this.n].className="hd-l active"
			ban[_this.oldn].style.opacity=0;
			ban[_this.oldn].style.display="none";
			ban[_this.n].style.opacity=1;
			ban[_this.n].style.display="block";
			_this.oldn=_this.n
		},2000)
	},
	destroyed: function () {
		console.log("我已经离开了！");
		clearInterval(this.time)
	},
}
</script>
<style>
/* /---------------------tl-n----------------------------/  */
.nr-top{
	width: 189px;
}
.nr-bottom{
	width: 189px;
}
.nr-a:hover,.r-a:hover{
	opacity: .8;
}
.nr-a{
	float: left;
    width: 180px;
    height: 80px;
	display: block;
    border-top: 10px solid #fafafa;
    background-color: #fff;
}
.nr-a img{
	width: 100%;
	height: 100%;
}
.r-a{
    float: left;
    width: 92px;
    margin-right: 1px;
    margin-bottom: 1px;
    height: 50px;
    padding: 5px 10px;
    overflow: hidden;
    background-color: #fff;
}
.r-a img{
	width: 100%;
	height: 100%;
}
.nzny{
	position: relative;
}
.nzny:hover .nvzhuang{
	display: block
}
.nzhw:hover .nanzhuang{
	display: block
}
.nzhw:hover span ,.nzhw:hover{
	background: #fff;
	color: #427def;
	}
.nzny:hover span ,.nzny:hover{
	background: #fff;
	color: #FF0036;
	}
.ny>.ny-r>.bt{
	color: #FF0036;
}
.ny>.ny-r>.bt2{
	color: #427def;;
}
.ny-r .ny-gy{
	text-align: right;
	display: inline-block;
	cursor: pointer;
	color: #666;
	margin-right: 13px;
	font-size: 14px;
	height: 22px;
	min-width: 25px;
	line-height: 22px;
}
.ny-gy:hover{
	color: #FF0036;
}
.ny-r{
	border-bottom:  1px solid #eee;
	margin-left:  90px;
	padding-top: 10px;
	width: 493px;
	/* height: 66px; */
}
.ny-r:last-child{
	border-bottom: none;
}
.ny-l{
	text-align: left;
	padding-left: 10px;
	text-align: center;
	margin-top: 10px;
	float: left;
	color: #000;
	width: 90px;
	/* height: 70px; */
}
.ny{
	width: 100%;
	margin-top: 8px;
	background: #fff;
	border-bottom: #ddd 1px dashed;
}
.ny:last-child{
	border-bottom: none;
}
.n-r{
	float: left;
	width: 209px;
	height: 500px;
	/* background: #999; */
	/* padding: 10px; */
}
.n-l{
	float: left;
	margin:0px 30px;
	width: 583px;
	height: 462px;
	background: #fffffe;
}
.tl-n{
	display: none;
	width: 852px;
	height:500px;
	position: absolute;
	top:0px;
	left:200px;
	background: #fff;
	
}
/* /------------------content-p-----------------------/  */
.gengduo{
	cursor: pointer;
	width: 10px;
	height: 10px;
	right:10px;
	top: 50%;
	margin-top: -12px;
position: absolute;
}
.gengduo:hover,.gengduo2:hover{
	color: #333;
}
.gengduo2{
	float: left;
	cursor: pointer;
	width: 50px;
	height: 35px;
	right:10px;
	top: 15px;
	position: absolute;
}
.pt-img{
	height: 316px;
	width: 485px;
}
.pt-img :hover{
	opacity: .8;
}
#stp-img:hover{
	opacity: .8;
}
.pt-img img{
	height: 316px;
	width: 485px;
}
.shangou-top{
	position: relative;
	background: #fff;
	width: 234px;
	height: 55px;
}
.stp{
	line-height: 55px;
	margin-left: 10px;
	height: 100%;
	float: left;
	display: block;
	font-size: 18px;
	color: #333;
}
.pingtai-top{
	position: relative;
	height: 55px;
	background: #fff;
}
.stp2{
	line-height: 55px;
	margin-left: 10px;
	height: 100%;
	float: left;
	display: block;
	font-size: 18px;
	color: #333;
}
#stp-img{
	width: 234px;
	height: 316px;
}
#stp-img img{
	cursor: pointer;
	width: 234px;
	height: 316px;
}
.content-p{
	padding-top: 24px;
	background: #F5F5F5;
	width: 100%;
	height: 394px;
}
.sp-w{
	width: 1230px;
	height: 370px;
	margin: 0 auto;
}
.shangou{
	background: #fff;
	float: left;
	width: 234px;
	height: 370px;
	margin: 0 13px 15px 0;
}
.pingtai{
	float: left;
	width: 485px;
	height: 370px;
	margin-right: 13px;
}
.pingtai:last-child{
	margin-right: 0;
}
/* /----------------content-w--------------------/  */
.tmcs{
	line-height: 35px;
	position: absolute;
	bottom: 0;
	left: 200px;
	width:1030px;
	height: 35px;
}
.tmcs-nav:last-child{
	margin-left: 10px;
}
.tmcs-nav{
	text-decoration: none;
	padding-left: 8px;
	line-height: 35px;
	font-size: 16px;
	color: #333;
	min-width:64px;
	height: 35px;
	float: left;
}
.tmcs-nav:hover{
	color: #FF0036;
}
.tmcs-nav>img{
	margin-bottom:13px;
	width: 100px;
	height: 30px;
}
#hd{
	bottom: 0;
	left:500px;
	position: absolute;
	margin: 0 auto;
	width: 400px;
	height: 20px;
}
.hd-l.active{
opacity: 1;
background: rgba(255,255,255,.8)
}
.hd-l{
	opacity: .8;
	cursor: pointer;
	margin-left: 20px;
	float: left;
	width: 30px;
	height: 5px;
	background: rgba(0,0,0,.4)
}
.clearfix::before{
	content: "";
	display: block;
	clear: both;
}
*{
	box-sizing: border-box;
}
body,ul,li,p,h1,h2,h3,em{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
	font-family: "微软雅黑";
	font-size: 12px;
	color: #666;
}
.w1230{
	width: 1230px;
}
h1,h2,h3{
	font-weight: normal;
}
#title-content{
	position: relative;
	/* line-height:173px; */
	margin: 0 auto;
	text-align: center;
	height: 173px;
}
#content-info{
	position: relative;
	margin: 0 auto;
	line-height: 106px;
	width:625px;
	height: 130px;
}
#shousuo{
	padding-left: 10px;
	outline: none;
	color: #666;
	border:3px solid #FF0036;
	width:623px;
	height:38px;
}
#bnt-shousuo{
	outline: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	top:37px;
	right:0px;
	position: absolute;
	text-align: center;
	width: 123px;
	height:35px;
	border:none;
	background:#FF0036;
	font-size:16px;
	color: #fff;
}
#content-info ul{
	top:80px;
	left:0px;
	position: absolute;	
	line-height:1.2;
	width: 625px;
	height: 28px;
}
#content-info>ul>li{
	font-size: 15px;
	float: left;
	width: 60px;
	height:20px;
}
#content-info>ul>li>a{
	text-decoration: none;
	border-right: 1px solid #999;
	display: block;
	color:#999;
	width: 60px;
	height:16px;
}
#content-info>ul>li:last-child a{
	border-right: none;
}
#content-info>ul>.hs>a{
	color: #FF0036;
}
#title-tp{
	overflow: hidden;
	top: 10px;
	left:-348px;
	position: absolute;
	width:290px;
	height: 130px;
}
#title-tp img{
	width:290px;
	height:130px;
}
#title-wrap{
	border-top: #FF0036 2px solid;
	background:#E8E8E8;
	position: relative;
	width: 100%;
	background-size: 100%;
}
.wrap-img{
	top: 0;
	left:128px;
	position: absolute;
	width:990px;
	height: 500px;
}
#title-bottom{
	padding-left: 200px;
	margin: 0 auto;
	height:500px;
	width: 1230px;
	position: relative;
	text-align: center;
}
#title-sp{
	padding-left: 10px;
	text-align: left;
	position: absolute;
	top: -36px;
	left:0px;
	line-height: 36px;
	width: 200px;
	height: 36px;
	background: #FF0036;
	float: left;
	color: #FFFFFF;
}
.tl{
	font-size: 14px;
	padding-left: 10px;
	width: 200px;
	height: 30px;
	float: left;
	color: #FFFFFF;
}
#fenleidaohang{
	text-align: left;
	line-height: 26px;
	background: rgba(0,0,0,.55);
	width: 200px;
	height: 500px;
	position: absolute;
	top:0;
	left:0;
	z-index:888;
}
.tl i.icn{
	line-height: 32px;
	font-size: 20px;
	padding:0 10px 0 5px;
}
.tl a{
	text-decoration: none;
	color: #fff;
}
.tl>a:hover{
	color: #FF0036;
}
#banner{
	position: relative;
	background: #666;
	width: 1200px;
	height: 500px;
	margin: 0 auto;
}
#banner>li{
	top:0;
	left: 0;
	width: 1200px;
	height: 500px;
	position: absolute
}
#banner .banner-l img{
	display: block;
	width: 1200px;
	height: 500px;
}
.banner-l{
	display: none;
}
#banner .banner-l:first-child{
	display: block;
} 
</style>

